<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>服务管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的服务</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-row>
        <el-col :span="4" style="padding-left:20px">
          <el-select v-model="queryInfo.orderProgress" placeholder="全部" @change="getOrders">
            <el-option label="已申请" value=0></el-option>
            <el-option label="处理中" value=1></el-option>
            <el-option label="已完成" value=2></el-option>
            <el-option label="已取消" value=3></el-option>
            <el-option label="待评价" value=4></el-option>
            <el-option label="已评价" value=5></el-option>
            <el-option label="全部" value=''></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="padding-left:20px">
          <el-select v-model="queryInfo.community" placeholder="全部" @change="getOrders">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4"  style="padding-left:20px">
          <el-date-picker v-model="queryInfo.queryTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" @change="getOrders">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-table :data="orderList" border>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="服务单号" prop="orderId"></el-table-column>
        <el-table-column label="服务类型" prop="orderType">
          <template slot-scope="{row}">
            <el-tag type="primary" v-if="row.orderType==0">政务服务</el-tag>
            <el-tag type="warning" v-else-if="row.orderType==1">社区服务</el-tag>
            <el-tag type="success" v-else-if="row.orderType==2">其他</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="服务描述" prop="orderDes"></el-table-column>
        <el-table-column label="服务进度">
          <template slot-scope="{row}">
            <el-tag type="primary" v-if="row.orderProgress==0">已申请</el-tag>
            <el-tag type="warning" v-else-if="row.orderProgress==1">处理中</el-tag>
            <el-tag type="success" v-else-if="row.orderProgress==2">已完成</el-tag>
            <el-tag type="danger" v-else-if="row.orderProgress==3">已取消</el-tag>
            <el-tag type="info" v-else-if="row.orderProgress==4">待评价</el-tag>
            <el-tag type="info" v-else-if="row.orderProgress==5">已评价</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="{row}">
            <span>{{row.createTime | dataFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="{row}">
            <span>{{row.updateTime | dataFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="受理工作人员Id">
          <template slot-scope="{row}">
            <el-link @click="showWorkDialog(row.workId)">{{row.workId}}<i class="el-icon-view el-icon--right"></i> </el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="233px">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" content="修改/查看" placement="top">
              <el-button type="primary" :disabled="row.orderProgress!==0 && row.orderProgress!==1 " @click="showEdit(row.orderId)" icon="el-icon-edit" size="mini"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="取消" placement="top">
              <el-button type="warning" :disabled="row.orderProgress!==0 && row.orderProgress!==1 " icon="el-icon-delete" size="mini" @click="cancelOrder(row.orderId)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="评价" placement="top">
              <el-button type="success" :disabled="row.orderProgress!==2 " icon="el-icon-star-off" size="mini" @click="showEvaluateDialogVisible(row.orderId)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="详情" placement="top">
              <el-button type="info" icon="el-icon-info" size="mini" @click="showDetail(row.orderId)"></el-button>
            </el-tooltip>
            <!-- {{row}} -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 30, 50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="text-align:center" background>
      </el-pagination>
    </el-card>

    <!-- 展示工作人员信息 -->
    <el-dialog title="工作人员信息" :visible.sync="workDialog" width="50%">
      <el-form :model="workInfo" label-width="100px">
        <el-form-item label="姓名:">
          <el-input v-model="workInfo.workName" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="电话:">
          <el-input v-model="workInfo.workPhone" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="工作状态:">
          <el-input v-model="workInfo.workState" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="工作社区:">
          <el-input v-model="workInfo.community" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="工作机构:">
          <el-input v-model="workInfo.address" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="职位:">
          <el-input v-model="workInfo.jobs" disabled style="width:80%"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改/查看服务信息  -->
    <el-dialog title="修改服务信息" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="100px">
        <el-form-item label="社区" prop="community">
          <el-input v-model="editForm.community" disabled></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="orderAddress">
          <el-input v-model="editForm.orderAddress"></el-input>
        </el-form-item>
        <el-form-item label="服务描述" prop="orderDes">
          <el-input v-model="editForm.orderDes"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-image style="width: 100px; height: 100px" :src="this.fileList"></el-image>
        </el-form-item>
      </el-form>
      <span>
        <el-button @click="editDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="editOrder">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 评价对话框 -->
    <el-dialog title="评价服务" :visible.sync="evaluateDialogVisible" width="50%" @close="cleanEvalution">
      <el-form label-width="100px" v-model="evaluate">
        <el-form-item label="评分：">
          <el-rate v-model="evaluate.evaluationValue" show-text> </el-rate>
        </el-form-item>
        <el-form-item label="评价：">
          <el-input v-model="evaluate.evaluation" placeholder="请输入你的评价" type="textarea" rows="4"></el-input>
        </el-form-item>
      </el-form>

      <span>
        <el-button @click="cleanEvalution()">取 消</el-button>
        <el-button type="primary" @click="evaluateOrder">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 服务单信息 -->
    <el-dialog title="服务单信息" :visible.sync="detailDialog" width="50%">
      <el-form :model="detailInfo" label-width="100px" disabled>
        <el-form-item label="服务类型:">
          <template :slot-scope="detailInfo.orderType">
            <el-tag type="primary" v-if="detailInfo.orderType==0">政务服务</el-tag>
            <el-tag type="warning" v-else-if="detailInfo.orderType==1">社区服务</el-tag>
            <el-tag type="success" v-else-if="detailInfo.orderType==2">其他</el-tag>
          </template>
        </el-form-item>
        <el-form-item label="服务进度:">
          <template :slot-scope="detailInfo.orderProgress">
            <el-tag type="primary" v-if="detailInfo.orderProgress==0">已申请</el-tag>
            <el-tag type="warning" v-else-if="detailInfo.orderProgress==1">处理中</el-tag>
            <el-tag type="success" v-else-if="detailInfo.orderProgress==2">已完成</el-tag>
            <el-tag type="danger" v-else-if="detailInfo.orderProgress==3">已取消</el-tag>
            <el-tag type="info" v-else-if="detailInfo.orderProgress==4">待评价</el-tag>
            <el-tag type="info" v-else-if="detailInfo.orderProgress==5">已评价</el-tag>
          </template>
        </el-form-item>
        <el-form-item label="服务内容:">
          <el-input v-model="detailInfo.orderDes" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="服务社区:">
          <el-input v-model="detailInfo.community" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="服务工作人员:">
          <el-input v-model="detailInfo.workName" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="职位:">
          <el-input v-model="detailInfo.jobs" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="我的评价:">
          <el-input v-model="detailInfo.evaluation" disabled style="width:80%"></el-input>
        </el-form-item>
        <el-form-item label="我的评分">
          <el-rate v-model="detailInfo.evaluationValue" show-text disabled> </el-rate>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import cityData from '../../assets/js/cityData.js'
export default {
  data () {
    return {
      queryInfo: {
        orderProgress: '',
        pageNum: 1,
        pageSize: 5,
        community: '',
        residentId: window.sessionStorage.getItem('userId'),
        queryTime: ''
      },
      orderList: [],
      workDialog: false,
      workInfo: {},
      editDialogVisible: false,
      editForm: {},
      rules: {},
      evaluateDialogVisible: false,
      fileList: [],
      evaluate: {
        evaluationValue: null,
        evaluation: '',
        evaluationId: ''
      },
      detailInfo: [],
      detailDialog: false,
      total: 0,
      cityData
    }
  },
  created () {
    this.getOrders()
  },
  methods: {
    // 获取服务
    async getOrders () {
      if (this.queryInfo.queryTime === null) this.queryInfo.queryTime = ''

      const { data: res } = await this.$http.get('order/getOrders', { params: this.queryInfo })
      this.orderList = res.data.records
      this.total = res.data.total
      this.$forceUpdate()
      // console.log(res)
    },
    // 展示员工信息
    async showWorkDialog (id) {
      const { data: res } = await this.$http.get(`work/getWorkerById/${id}`)
      this.workInfo = res.data
      this.workDialog = true
    },
    // 展示修改框
    async showEdit (id) {
      const { data: res } = await this.$http.get(`order/getOrderById/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('信息失败')
      }
      // console.log(this.editForm)
      console.log(res)
      this.editForm = res.data
      // 该字符串
      this.fileList = res.data.pics
      this.editDialogVisible = true
    },
    // 修改服务
    async editOrder () {
      const { data: res } = await this.$http.put(`order/editOrderById/${this.editForm.orderId}`, this.editForm)
      // this.editForm.pics = this.fileList.join(' ')
      // console.log(res)
      // console.log(res);
      if (res.meta.status !== 200) {
        return this.$message.error('修改失败')
      }
      this.$message.success('修改成功')
      this.editDialogVisible = false
      this.getOrders()
    },
    // 取消服务
    async cancelOrder (id) {
      const { data: res } = await this.$http.put(`order/cancelOrderById/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('取消失败')
      }
      this.$message.success('取消成功')
      this.getOrders()
    },
    showEvaluateDialogVisible (id) {
      this.evaluate.evaluationId = id
      this.evaluateDialogVisible = true
    },
    // 清除评价框信息
    cleanEvalution () {
      this.evaluate.evaluationId = ''
      this.evaluate.evaluationValue = null
      this.evaluate.evaluation = ''
      this.evaluateDialogVisible = false
    },
    // 评价服务
    async evaluateOrder () {
      const { data: res } = await this.$http.put(`order/evaluateOrderById/${this.evaluate.evaluationId}`, { evaluationValue: this.evaluate.evaluationValue, evaluation: this.evaluate.evaluation })
      if (res.meta.status !== 200) {
        return this.$message.error('评价失败')
      }
      this.$message.success('评价成功')
      this.cleanEvalution()
      this.getOrders()
    },
    // 展示详情
    async showDetail (id) {
      const { data: res } = await this.$http.get(`order/getOrderById/${id}`)
      this.detailInfo = res.data
      const { data: work } = await this.$http.get(`work/getWorkerById/${this.detailInfo.workId}`)
      // const message =work.data
      Object.assign(this.detailInfo, work.data)
      this.detailDialog = true
    },
    // 分页器
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getOrders()
    },
    handleCurrentChange (newSize) {
      this.queryInfo.pageNum = newSize
      this.getOrders()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
